<template>
  <div class="order-management">
    <!-- 顶部标题和统计 -->
    <div class="header">
      <h1>
        <i class="fas fa-clipboard-list"></i>
        生产订单管理系统
      </h1>
      <div class="stats">
        <div class="stat-card">
          <h3>总订单数</h3>
          <div class="value">24</div>
        </div>
        <div class="stat-card">
          <h3>进行中订单</h3>
          <div class="value">18</div>
        </div>
        <div class="stat-card">
          <h3>本月完成订单</h3>
          <div class="value">6</div>
        </div>
        <div class="stat-card">
          <h3>高优先级订单</h3>
          <div class="value">8</div>
        </div>
      </div>
    </div>
    
    <!-- 顶部筛选/排序 -->
    <div class="filter-bar">
      <div class="filter-item">
        <label>排序方式</label>
        <select v-model="sortBy">
          <option value="orderDate">订单日期</option>
          <option value="orderNumber">订单编号</option>
          <option value="quantity">订单数量</option>
          <option value="priority">优先级</option>
          <option value="progress">任务进度</option>
          <option value="createTime">创建时间</option>
        </select>
      </div>
      <div class="filter-item">
        <label>搜索订单</label>
        <input type="text" placeholder="输入订单编号、日期..." v-model="searchQuery">
      </div>
      <div class="action-buttons">
        <button class="btn btn-primary">
          <i class="fas fa-plus"></i> 新建订单
        </button>
        <button class="btn btn-outline">
          <i class="fas fa-download"></i> 导出数据
        </button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="table-container">
      <table class="order-table">
        <thead>
          <tr>
            <th class="checkbox-header">
              <input type="checkbox" v-model="selectAll" @change="toggleAllSelection">
            </th>
            <th>订单编号</th>
            <th>订单日期</th>
            <th>订单数量</th>
            <th>优先级</th>
            <th>工序生产进度</th>
            <th>任务进度</th>
            <th>创建时间</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(order, index) in paginatedOrders" 
              :key="index" 
              :class="{ 'selected': selectedOrders.includes(order.id) }">
            <td class="checkbox-cell">
              <input type="checkbox" v-model="selectedOrders" :value="order.id">
            </td>
            <td>{{ order.orderNumber }}</td>
            <td>{{ order.orderDate }}</td>
            <td>{{ order.quantity.toLocaleString() }}</td>
            <td><span class="priority" :class="'lv' + order.priorityLevel">{{ order.priority }}</span></td>
            <td>
              <div class="process-steps">
                <div v-for="(step, stepIndex) in order.processSteps" :key="stepIndex" 
                     :class="['step', { 'active': stepIndex <= completedSteps(order.id) }, 
                            { 'current': stepIndex === currentStep(order.id) }]">
                  <span class="step-number">{{ stepIndex + 1 }}</span>
                  <div class="step-name">{{ step.name }}</div>
                  <div class="step-line" v-if="stepIndex < order.processSteps.length - 1"></div>
                </div>
              </div>
            </td>
            <td>
              <div class="progress-bar">
                <div class="progress" :style="{ width: order.progress + '%' }"></div>
                <div class="progress-text">{{ order.progressText }}</div>
              </div>
            </td>
            <td>{{ order.createTime }}</td>
          </tr>
        </tbody>
      </table>
      
      <div class="empty-state" v-if="paginatedOrders.length === 0">
        <i class="fas fa-inbox"></i>
        <h3>没有找到匹配的订单</h3>
        <p>请尝试其他搜索条件或创建新的生产订单</p>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer-info">
      <div class="selected-info">已选择 {{ selectedOrders.length }} 条记录</div>
      <div class="pagination">
        <button @click="currentPage = 1" :disabled="currentPage === 1">
          <i class="fas fa-angle-double-left"></i>
        </button>
        <button @click="currentPage > 1 ? currentPage-- : null" :disabled="currentPage === 1">
          <i class="fas fa-angle-left"></i>
        </button>
        <button v-for="page in totalPages" :key="page" 
                @click="currentPage = page"
                :class="{ 'active': currentPage === page }">
          {{ page }}
        </button>
        <button @click="currentPage < totalPages ? currentPage++ : null" :disabled="currentPage === totalPages">
          <i class="fas fa-angle-right"></i>
        </button>
        <button @click="currentPage = totalPages" :disabled="currentPage === totalPages">
          <i class="fas fa-angle-double-right"></i>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'OrderManagement',
  data() {
    return {
      // 所有订单数据
      allOrders: [
        {
          id: 'PO00000005',
          orderNumber: 'PO00000005',
          orderDate: '2024-01-05',
          quantity: 300,
          priority: 'LV1',
          priorityLevel: 1,
          processSteps: [
            { name: '建模' },
            { name: '冲压' },
            { name: '焊接' },
            { name: '涂装' },
            { name: '总装' }
          ],
          progress: 80,
          progressText: '80%(300)',
          createTime: '2024-01-05 13:00:00'
        },
        {
          id: 'PO00000004',
          orderNumber: 'PO00000004',
          orderDate: '2024-01-04',
          quantity: 8000,
          priority: 'LV1',
          priorityLevel: 1,
          processSteps: [
            { name: '建模' },
            { name: '冲压' },
            { name: '焊接' },
            { name: '涂装' },
            { name: '总装' }
          ],
          progress: 80,
          progressText: '80%(8000)',
          createTime: '2024-01-04 12:00:00'
        },
        {
          id: 'PO00000003',
          orderNumber: 'PO00000003',
          orderDate: '2024-01-03',
          quantity: 1700,
          priority: 'LV1',
          priorityLevel: 1,
          processSteps: [
            { name: '建模' },
            { name: '冲压' },
            { name: '焊接' },
            { name: '涂装' },
            { name: '总装' }
          ],
          progress: 80,
          progressText: '80%(1700)',
          createTime: '2024-01-03 11:00:00'
        },
        {
          id: 'PO00000002',
          orderNumber: 'PO00000002',
          orderDate: '2024-01-02',
          quantity: 4500,
          priority: 'LV2',
          priorityLevel: 2,
          processSteps: [
            { name: '建模' },
            { name: '冲压' },
            { name: '焊接' },
            { name: '涂装' },
            { name: '总装' }
          ],
          progress: 60,
          progressText: '60%(4500)',
          createTime: '2024-01-02 10:30:00'
        },
        {
          id: 'PO00000001',
          orderNumber: 'PO00000001',
          orderDate: '2024-01-01',
          quantity: 1200,
          priority: 'LV3',
          priorityLevel: 3,
          processSteps: [
            { name: '建模' },
            { name: '冲压' },
            { name: '焊接' },
            { name: '涂装' },
            { name: '总装' }
          ],
          progress: 40,
          progressText: '40%(1200)',
          createTime: '2024-01-01 09:15:00'
        }
      ],
      
      // 当前筛选和排序状态
      sortBy: 'orderDate',
      sortDirection: 'desc',
      searchQuery: '',
      
      // 选中的订单
      selectedOrders: [],
      
      // 选中所有
      selectAll: false,
      
      // 分页
      currentPage: 1,
      pageSize: 10
    };
  },
  computed: {
    // 过滤后的订单列表
    filteredOrders() {
      let filtered = this.allOrders.filter(order => {
        // 搜索过滤
        return this.searchQuery === '' || 
               order.orderNumber.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
               order.orderDate.includes(this.searchQuery) ||
               order.createTime.includes(this.searchQuery);
      });
      
      return filtered;
    },
    
    // 排序后的订单
    sortedOrders() {
      return [...this.filteredOrders].sort((a, b) => {
        const aVal = this.getSortValue(a);
        const bVal = this.getSortValue(b);
        
        if (aVal < bVal) return this.sortDirection === 'asc' ? -1 : 1;
        if (aVal > bVal) return this.sortDirection === 'asc' ? 1 : -1;
        return 0;
      });
    },
    
    // 分页后的订单
    paginatedOrders() {
      const start = (this.currentPage - 1) * this.pageSize;
      return this.sortedOrders.slice(start, start + this.pageSize);
    },
    
    // 总页数
    totalPages() {
      return Math.ceil(this.filteredOrders.length / this.pageSize);
    }
  },
  watch: {
    selectedOrders(newVal) {
      this.selectAll = newVal.length === this.allOrders.length && this.allOrders.length > 0;
    }
  },
  methods: {
    // 处理排序变化
    handleSortChange(sortBy) {
      if (this.sortBy === sortBy) {
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        this.sortBy = sortBy;
        this.sortDirection = 'desc';
      }
    },
    
    // 处理搜索
    handleSearch(query) {
      this.searchQuery = query;
      this.currentPage = 1; // 搜索时重置到第一页
    },
    
    // 切换选中状态
    toggleSelection(orderId) {
      const index = this.selectedOrders.indexOf(orderId);
      if (index > -1) {
        this.selectedOrders.splice(index, 1);
      } else {
        this.selectedOrders.push(orderId);
      }
    },
    
    // 切换全选状态
    toggleAllSelection() {
      if (this.selectAll) {
        // 全选：选中所有订单
        this.selectedOrders = this.allOrders.map(order => order.id);
      } else {
        // 取消全选
        this.selectedOrders = [];
      }
    },
    
    // 获取排序值
    getSortValue(order) {
      switch (this.sortBy) {
        case 'orderDate':
          return new Date(order.orderDate);
        case 'quantity':
          return order.quantity;
        case 'priority':
          return order.priorityLevel;
        case 'progress':
          return order.progress;
        case 'createTime':
          return new Date(order.createTime);
        default:
          return order.orderNumber;
      }
    },
    
    // 获取已完成步骤数
    completedSteps(orderId) {
      const order = this.allOrders.find(o => o.id === orderId);
      if (!order) return 0;
      
      // 这里可以根据实际业务逻辑计算完成的步骤
      // 简化处理：假设已完成步骤数等于进度百分比除以20（每20%一个步骤）
      return Math.floor(order.progress / 20);
    },
    
    // 获取当前步骤
    currentStep(orderId) {
      const order = this.allOrders.find(o => o.id === orderId);
      if (!order) return 0;
      
      // 计算当前步骤（完成百分比对应的步骤）
      const percentComplete = order.progress;
      const steps = order.processSteps.length;
      return Math.min(Math.floor((percentComplete / 100) * steps), steps - 1);
    }
  }
};
</script>

<style scoped>
/* 保持原有样式 */
.order-management {
  max-width: 1400px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.header {
  background: linear-gradient(120deg, #1e3c72, #2a5298);
  color: white;
  padding: 20px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header h1 i {
  background: rgba(255, 255, 255, 0.2);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats {
  display: flex;
  gap: 25px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.15);
  padding: 12px 20px;
  border-radius: 10px;
  min-width: 180px;
  backdrop-filter: blur(5px);
}

.stat-card h3 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
  opacity: 0.9;
}

.stat-card .value {
  font-size: 24px;
  font-weight: 600;
}

.filter-bar {
  display: flex;
  padding: 20px;
  background: #f8fafc;
  border-bottom: 1px solid #eaeef5;
  flex-wrap: wrap;
  gap: 15px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  flex: 1;
}

.filter-item label {
  font-size: 13px;
  color: #5a6c84;
  margin-bottom: 6px;
  font-weight: 500;
}

.filter-item select, 
.filter-item input {
  padding: 10px 14px;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  background: white;
  font-size: 14px;
  transition: all 0.3s;
}

.filter-item select:focus, 
.filter-item input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.action-buttons {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.btn {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-primary {
  background: #409eff;
  color: white;
}

.btn-primary:hover {
  background: #337ecc;
}

.btn-outline {
  background: transparent;
  border: 1px solid #d1d9e6;
  color: #606266;
}

.btn-outline:hover {
  background: #f5f7fa;
  border-color: #c0c4cc;
}

.table-container {
  overflow-x: auto;
  padding: 0 20px;
}

.order-table {
  width: 100%;
  border-collapse: collapse;
  background-color: #fff;
  min-width: 1000px;
}

.order-table th {
  background-color: #f5f9ff;
  color: #409eff;
  font-weight: 600;
  text-align: left;
  padding: 16px 15px;
  font-size: 14px;
  border-bottom: 1px solid #eaeef5;
  position: sticky;
  top: 0;
}

.order-table td {
  padding: 16px 15px;
  border-bottom: 1px solid #f0f2f5;
  font-size: 14px;
  color: #606266;
}

.order-table tbody tr {
  transition: all 0.2s;
}

.order-table tbody tr:hover {
  background-color: #f5f9ff;
}

.order-table tbody tr.selected {
  background-color: #ecf5ff;
}

.checkbox-header, .checkbox-cell {
  width: 40px;
  text-align: center;
}

.checkbox-header input, .checkbox-cell input {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.priority {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.priority.lv1 {
  background: #fef0f0;
  color: #f56c6c;
}

.priority.lv2 {
  background: #fdf6ec;
  color: #e6a23c;
}

.priority.lv3 {
  background: #ecf5ff;
  color: #409eff;
}

.process-steps {
  display: flex;
  align-items: center;
  min-width: 300px;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 60px;
}

.step-number {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #909399;
  margin-bottom: 6px;
  z-index: 2;
  position: relative;
}

.step-name {
  font-size: 12px;
  color: #909399;
  text-align: center;
  line-height: 1.4;
}

.step-line {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: #e4e7ed;
  z-index: 1;
}

.step:last-child .step-line {
  display: none;
}

.step.active .step-number {
  background: #409eff;
  color: white;
}

.step.active .step-name {
  color: #409eff;
  font-weight: 500;
}

.step.current .step-number {
  background: #67c23a;
  box-shadow: 0 0 0 3px rgba(103, 194, 58, 0.2);
}

.step.current .step-name {
  color: #67c23a;
  font-weight: 600;
}

.step.active .step-line {
  background: #409eff;
}

.step.current .step-line {
  background: linear-gradient(to right, #67c23a, #409eff);
}

.progress-bar {
  height: 8px;
  background: #f0f2f5;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  margin-top: 6px;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #409eff, #79bbff);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.progress-text {
  position: absolute;
  top: -20px;
  right: 0;
  font-size: 12px;
  color: #409eff;
  font-weight: 500;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background: #f8fafc;
  border-top: 1px solid #eaeef5;
}

.selected-info {
  color: #409eff;
  font-weight: 500;
}

.pagination {
  display: flex;
  gap: 8px;
}

.pagination button {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #d1d9e6;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination button:hover {
  border-color: #409eff;
  color: #409eff;
}

.pagination button.active {
  background: #409eff;
  color: white;
  border-color: #409eff;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-state {
  padding: 60px 20px;
  text-align: center;
  color: #909399;
}

.empty-state i {
  font-size: 60px;
  margin-bottom: 20px;
  opacity: 0.3;
}

.empty-state h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 500;
}

.empty-state p {
  font-size: 14px;
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.6;
}

@media (max-width: 1200px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  
  .stats {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 768px) {
  .filter-bar {
    flex-direction: column;
  }
  
  .action-buttons {
    align-self: flex-start;
    margin-top: 10px;
  }
  
  .footer-info {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  
  .pagination {
    align-self: flex-end;
  }
}
</style>